<template>
    <view class="container">
        <z-paging ref="paging" v-model="goodList" @query="upCallback">
            <template #top>
                <u-navbar back-text="" height="66">
                    <view class="text-area">
                        <u-field v-model="keyword" :border-bottom="false" icon="search" label-width="50" placeholder="请输入您想搜索的商品关键字" @confirm="queryList(keyword)"></u-field>
                    </view>
                    <view slot="right" class="slot-right" @click="changeShowMode">
                        <text class="icon" :class="{ 'icon-grid': grid, 'icon-list': !grid }"></text>
                    </view>
                </u-navbar>
                <sort-cate-bar @sort="handleSort" @on-filter="handleFilter" />
                <holder height="41px"/>
            </template>
            <!-- 行布局 -->
            <column1 v-if="!grid" :list="goodList" :config="config"></column1>
            <!-- 宫格布局 -->
            <column2 v-else :list="goodList" :config="config"></column2>
        </z-paging>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import column1 from '@/components/layout-module/modules/components/Column-1/index.vue'
import column2 from '@/components/layout-module/modules/components/Column-2/index.vue'
import { useUserStore, useOrderStore } from '@/store'
import sortCateBar from './components/sort-cate-bar.vue'

const keyword = ref('')
const grid = ref(true)
const config = ref({
    padding: '0px',
    showLabel: false,
    titleStyle: {
        color: 'black',
        fontSize: '28rpx',
        lineHeight: '50rpx'
    },
    priceStyle: {
        color: 'red',
        fontSize: '34rpx',
        lineHeight: '44rpx'
    },
    backgroundColor: 'white',
    marginRight: '0px',
    marginBottom: '10rpx',
    borderRadius: '0',
    showStar: false,
    showSuggest: false,
    showPrice: true,
    showSales: false,
    starColor: 'gold',
    useWaterfall: false
})
const goodList = ref([])

const filter = ref<any>({})

const userStore = useUserStore()
const orderStore = useOrderStore()

const paging = ref<any>(null)

function upCallback(pageNo: number) {
    let para = Object.assign(filter.value, {
        current: pageNo,
        merchantType: userStore.userInfo.type,
        releaseName: keyword.value
    })
    console.log(para);
    if (userStore.userInfo.memberId) para.memberId = userStore.userInfo.memberId

    para = dealParams(para)

    uni.$u.$api.GoodsApi.queryGoodsReleasePage(para)
        .then((res: any) => {
            paging.value?.complete(res.records)
        })
        .catch(() => {
            paging.value?.complete(false)
        })
}

function queryList(keyword: string) {
    filter.value = { releaseName: keyword }
    orderStore.addHistory(keyword)

    paging.value.reload()

    uni.hideKeyboard()
}

/**
 * 当前环境下 的 参数处理  去除 空字符串  空数组 null 等情况
 * @param {Object} params 参数对象
 */
function dealParams(params: any) {
    for (let key in params) {
        // 去除空数组
        if (Array.isArray(params[key]) && params[key].length === 0) {
            delete params[key]
        }
        //
        if (params[key] === '' || params[key] == undefined || params[key] == null) {
            delete params[key]
        }
    }
    return params
}
/** 查找分类 */
function changeShowMode() {
    grid.value = !grid.value
}
/** 重新排列列表 */
function handleSort(arr: Array<any>) {
    arr.forEach((item, i) => {
        if (item != 0) {
            let sort = item == 1 ? 'asc' : 'desc'
            switch (i) {
                //综合
                case 0:
                    delete filter.value.timeSort
                    delete filter.value.priceSort
                    delete filter.value.saleSort
                    filter.value = Object.assign(filter.value, { multiSort: sort, current: 1 })
                    break
                //销量
                case 1:
                    delete filter.value.timeSort
                    delete filter.value.priceSort
                    delete filter.value.multiSort
                    filter.value = Object.assign(filter.value, { saleSort: sort, current: 1 })
                    break
                // 价格
                case 2:
                    delete filter.value.timeSort
                    delete filter.value.saleSort
                    delete filter.value.multiSort
                    filter.value = Object.assign(filter.value, { priceSort: sort, current: 1 })
                    break
                // 上新
                case 3:
                    delete filter.value.priceSort
                    delete filter.value.saleSort
                    delete filter.value.multiSort
                    filter.value = Object.assign(filter.value, { timeSort: sort, current: 1 })
                    break
                default:
                    break
            }
            paging.value.reload()
        }
    })
}

// 过滤数据
function handleFilter(v: any) {
    if (v.timeSort) delete v.timeSort
    if (v.priceSort) delete v.priceSort
    filter.value = v
    keyword.value = ''
    paging.value.reload()
}
</script>

<style scoped lang="scss">
.container {
    height: 100vh;
    .text-area {
        height: 80rpx;
        background-color: #f4f4f4;
        flex: 1;
        :deep(.u-field) {
            padding: 16rpx 28rpx;
        }
    }
    .slot-right {
        margin: 30rpx;
    }
}
</style>
